<template>
	<div
		:class="[
			'app-editor-container',
			'app-mob-array-box',
			`app-mob-array-box-${name}`,
			disabled || readonly ? 'is-disabled' : null,
		]"
	>
		<template v-if="items.length == 0">
			<van-icon
				name="add-o"
				class="app-mob-array-box__icon add"
				@click="addItem()"
			/>
		</template>
		<template v-else>
			<template v-for="(item, index) in items" :key="item.key">
				<van-swipe-cell :stop-propagation="true">
					<div class="app-mob-array-box__item">
						<AppMobInput
							v-bind="$attrs"
							:type="type"
							:value="item.value"
							:disabled="disabled || readonly"
							:class="{
								'hidden-message':
									Object.is(index, 0) &&
									items.length === 1 &&
									!isExistAndNotEmpty(item.value),
							}"
							@editor-event="(data:any) => handleInputEvent(data, index)"
						/>
						<div
							v-if="!(disabled || readonly)"
							class="app-mob-array-box__icons"
						>
							<van-popover
								v-if="
									Object.is(editorStyle, 'url') || Object.is(editorStyle, 'img')
								"
								v-model:show="showPopover"
								theme="dark"
								overlay-class="app-array-box__tip"
							>
								<van-image
									v-if="Object.is(editorStyle, 'img')"
									width="170"
									:src="item.value"
								>
									<template v-slot:error
										><img src="/assets/img/404.png" /></template
								></van-image>
								<a
									class="app-array-box-link"
									v-else
									:href="getUrl(item.value)"
									:target="target"
								>
									{{ getUrl(item.value) }}
								</a>
								<template #reference v-if="item.value">
									<van-icon
										v-if="Object.is(editorStyle, 'url')"
										name="link-o"
										class="app-mob-array-box__icon link"
									/>
									<van-icon
										v-else
										name="photo-o"
										class="app-mob-array-box__icon img"
									/>
								</template>
							</van-popover>
						</div>
					</div>
					<template #right>
						<van-icon
							v-if="!limit || items.length < limit"
							name="add-o"
							class="app-mob-array-box__icon add"
							@click="addItem(index + 1)"
						/>
						<van-icon
							name="close"
							class="app-mob-array-box__icon remove"
							@click="removeItem(index)"
						/>
					</template>
				</van-swipe-cell>
			</template>
		</template>
	</div>
</template>
<script setup lang="ts">
import { Ref } from 'vue';
import { arrayBoxProps } from './array-box';
import {
	createUUID,
	IEvent,
	IParam,
	VerifyUtil,
	isExistAndNotEmpty,
} from '@/core';

interface EditorEmit {
	(name: 'editor-event', value: IEvent<string>): void;
}

const props = defineProps(arrayBoxProps);
const emit = defineEmits<EditorEmit>();
/**
 * 数组数据
 */
const items: Ref<any[]> = ref([]);
const showPopover: Ref<boolean> = ref(false);

watch(
	() => props.value,
	(newVal: any) => {
		if (newVal) {
			if (items.value.length == 0) {
				items.value = newVal.map((value: any) => {
					return {
						key: createUUID(),
						value,
					};
				});
			}
		} else {
			items.value = [];
		}
	},
	{
		immediate: true,
	}
);

/**
 * @description 添加编辑项
 * @param index 添加索引
 */
const addItem = (index?: number) => {
	if (props.disabled || props.readonly) {
		return;
	}
	const tempLink = {
		key: createUUID(),
		value: null,
	};
	if (index) {
		items.value.splice(index, 0, tempLink);
	} else {
		items.value.push(tempLink);
	}
	onEmit();
};

/**
 * @description 移除当前项
 * @param index 移除索引
 */
const removeItem = (index: number) => {
	items.value.splice(index, 1);
	onEmit();
};

/**
 * @description 获取url完整路径（前缀后缀）
 * @param value 值
 */
const getUrl = (value: string) => {
	let tempValue = value;
	if (tempValue) {
		if (props.prepend) {
			tempValue = props.prepend + tempValue;
		}
		if (props.append) {
			tempValue = tempValue + props.append;
		}
	}
	return tempValue;
};

/**
 * @description 处理input抛出事件
 * @param itemDate 项数据
 * @param index 项索引
 */
const handleInputEvent = (itemDate: any, index: number) => {
	const { action, data } = itemDate;
	switch (action) {
		case 'valueChange':
			handleChange(data, index);
			break;
		case 'editorBlur':
			onBlur(data);
			break;
		case 'editorFocus':
			onFocus(data);
			break;
	}
};

/**
 * @description 值改变
 * @param value 改变值
 * @param index 索引
 */
const handleChange = (value: any, index: number) => {
	items.value[index].value = Object.is(props.type, 'number')
		? Number(value)
		: value;
	onEmit();
};

/**
 * @description 失焦
 * @param $event 参数
 */
const onBlur = ($event: any) => {
	const result = items.value.map((item: any) => item.value);
	emit('editor-event', {
		name: `${props.name}`,
		action: 'editorBlur',
		data: result,
	});
};

/**
 * @description 聚焦
 * @param $event 参数
 */
const onFocus = ($event: any) => {
	const result = items.value.map((item: any) => item.value);
	emit('editor-event', {
		name: `${props.name}`,
		action: 'editorFocus',
		data: result,
	});
};

/**
 * @description 抛出值改变
 */
const onEmit = () => {
	const result = items.value.map((item: any) => item.value);
	emit('editor-event', {
		name: `${props.name}`,
		action: 'valueChange',
		data: result,
	});
};

</script>
